@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
@endsection
@section('scripts')
    <script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    form: {
                        username: "{{ auth()->user()->username }}",
                        name: "{{ auth()->user()->name }}",
                        {{--truename: "{{ auth()->user()->truename }}",--}}
                        {{--card: "{{ auth()->user()->card }}",--}}
                        avatar: "{{ auth()->user()->avatar }}",
                        company: "{{ auth()->user()->company }}",
                        introduce: "{{ auth()->user()->introduce }}",
                        email: "{{ auth()->user()->email }}",
                        _token:"{{csrf_token()}}"
                    },
                }
            },
            methods: {
                update() {
                    let that = this;
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            $.post("{{ route('user.index.detail') }}",this.form,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        message: '编辑个人资料成功',
                                        type: 'success'
                                    });
                                    setTimeout(function(){
                                        window.location.href = "{{ route('user.index.index') }}";
                                    }, 1000);
                                }
                            });
                        }
                    });
                },
                //上传封面
                uploadSuccess(res, file) {
                    this.form.avatar = res.data.path;
                },
                uploadBefore(file) {
                    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isJPG) {
                        this.$message.error('上传封面图片只能是 JPG | PNG | GIF格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传封面图片大小不能超过 2M!');
                    }
                    return isJPG && isLt2M;
                },
            }
        });
    </script>
@endsection
@section('content')
    @include('user.layout.head')
    <div class="container main">
        <div class="row">
            <div class="col-lg-2 user-left">
                @include('user.layout.left')
            </div>
            <div class="col-lg-10 main-list-item user-right" id="app" v-cloak>
                <div class="user-right-note">编辑资料</div>
                <div class="col-lg-12 user-right-info">
                    <el-form :model="form" ref="form" status-icon label-position="top" class="login-form">
                        <el-form-item prop="avatar">
                            <el-upload
                                    class="index-avatar-uploader"
                                    action="{{ $setting['img_upload'] }}"
                                    :show-file-list="false"
                                    name="image"
                                    :on-success="uploadSuccess"
                                    :before-upload="uploadBefore">
                                <img v-if="form.avatar" :src="form.avatar"
                                     class="index-avatar">
                                <i v-else class="el-icon-plus index-avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="用户名：" prop="name">
                            <el-input  v-model="form.name"  placeholder="请填写用户名" auto-complete="off"></el-input>
                        </el-form-item>
{{--                        <el-form-item label="姓名：" prop="truename">--}}
{{--                            <el-input v-model="form.truename"  placeholder="请填写真实姓名" auto-complete="off"></el-input>--}}
{{--                        </el-form-item>--}}
{{--                        <el-form-item label="身份证：" prop="card">--}}
{{--                            <el-input v-model="form.card"  placeholder="请填写身份证号码" auto-complete="off"></el-input>--}}
{{--                        </el-form-item>--}}
                        <el-form-item label="手机号：" prop="username">
                            <el-input v-model="form.username" readonly placeholder="请填写手机号" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱：" prop="email">
                            <el-input v-model="form.email"  placeholder="请填写邮箱" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="公司：" prop="company">
                            <el-input v-model="form.company"  placeholder="请填写公司名称" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="个人简介：" prop="introduce">
                            <el-input type="textarea" rows="5" v-model="form.introduce" placeholder="请填写个人简介"></el-input>
                        </el-form-item>
                        <div class="form-submit text-center">
                            <el-button type="primary" style="width: 150px" @click="update()">保存提交</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
@endsection

